<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/marked/0.3.6/marked.js"></script>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/default.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js"></script>
    <link rel="stylesheet" href="../../static/css/myMarkdorn.css">
    <!--<script>hljs.initHighlightingOnLoad();</script>-->
</head>
<body>
<div id="testBox">
    <textarea id="texts"></textarea>
    <button type="button" value="submit" onclick="changeTexts()"></button>
</div>
<div id="content">
    <!--<pre><code class="java">-->
        <!--String name = "Tom";-->
        <!--for(int i=0;i<100;i++){-->
            <!--System.out.println("Hello "+name);-->
        <!--}-->
    <!--</code></pre>-->
</div>
<!--<script>hljs.initHighlightingOnLoad();</script>-->
<script>
    //    document.getElementById('content').innerHTML =
    //            marked('# Marked in browser\n\nRendered by **marked**.');
    //    var marked = require('marked');
    //
    //    var markdownString = '```js\n console.log("hello"); \n```';
    //
//    var marked = require('marked');
//    var markdownString = '```js\n console.log("hello"); \n```';
//    marked.setOptions({
//        highlight: function (code) {
//            return require('highlight.js').highlightAuto(code).value;
//        }
//    })
//    $('#content').html(marked(markdownString))
    // Using async version of marked

//    marked(markdownString, function (err, content) {
//        if (err) throw err;
//        console.log(content);
//        $('#content').html(content)
//    });

    marked.setOptions({
        highlight:function (code) {
            return hljs.highlightAuto(code).value;
        }
    })
    function changeTexts() {
        var text = $('#texts').val();
        marked(text,function (err, content) {
            console.log(content)
            $('#content').html(content)
        })
    }
</script>
</body>
</html>